<div class="footer-banner">
  <div class="{% if section.settings.full_width %} {% else %} pages-width{% endif %}">
   {%- if section.settings.header != blank -%}
   <div class="title">
    {{ section.settings.header }}
   </div>
 {% endif %}
   <div class="footer-img">
     {%- if section.settings.image != blank -%}
     <div class="banner__media media{% if section.settings.image == blank %} placeholder{% endif %}">
       <img
         srcset="{%- if section.settings.image.width >= 323 -%}{{ section.settings.image | img_url: '323x' }} 323w,{%- endif -%}
           {%- if section.settings.image.width >= 362 -%}{{ section.settings.image | img_url: '362x' }} 362w,{%- endif -%}
           {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
           {%- if section.settings.image.width >= 1000 -%}{{ section.settings.image | img_url: '1000' }} 1000,{%- endif -%}
           {%- if section.settings.image.width >= 1100 -%}{{ section.settings.image | img_url: '1100x' }} 1100w,{%- endif -%}
           {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
           {%- if section.settings.image.width >= 1780 -%}{{ section.settings.image | img_url: '1780x' }} 1780w,{%- endif -%}
           {%- if section.settings.image.width >= 2000 -%}{{ section.settings.image | img_url: '2000x' }} 2000w,{%- endif -%}
           {%- if section.settings.image.width >= 3000 -%}{{ section.settings.image | img_url: '3000x' }} 3000w,{%- endif -%}
           {%- if section.settings.image.width >= 3840 -%}{{ section.settings.image | img_url: '3840x' }} 3840w,{%- endif -%}
           {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
         sizes="{% if section.settings.image_2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
         data-src="{{ section.settings.image | img_url: '1500x' }}"
         loading="lazy"
         class="lazyload"
         alt="{{ section.settings.image.alt | escape }}"
         width="{{ section.settings.image.width }}"
         height="{{ section.settings.image.width | divided_by: section.settings.image.aspect_ratio }}"
       >
     </div>
     {%- endif -%} 
     <div class="footer-content">
       <div>
        {% if section.settings.text != blank %}
        <h4> {{ section.settings.text }}</h4>
      {% endif %}
      {% if section.settings.richtext != blank %}
        <div class="rte">
           {{ section.settings.richtext }}
        </div>
     {% endif %}
       </div>
    </div>
   </div>
   
   <div class="footer_about grid--3-col">
      <ul class="about_ul">
       {%- for block in section.blocks -%}
       <li class="about_li" {{ block.shopify_attributes }}>
         {%- if block.settings.title != blank -%}
           {{ block.settings.title | escape }}
         {%- endif -%}
       </li>
      {%- endfor -%}
      </ul>

       <ul class="block_des">
         {%- for block in section.blocks -%}
         <li class="about_li" {{ block.shopify_attributes }}>
           {%- if block.settings.title != blank -%}
              <h3>{{ block.settings.title | escape }}</h3>
           {%- endif -%}
           {%- if block.settings.text != blank -%}
             <div class="about_rte">{{ block.settings.text }}</div>
           {%- endif -%}
         </li>
       {%- endfor -%}
       </ul>
   </div>   

  </div>
</div>

{% schema %}
{
 "name": "Footer banner",
 "tag": "section",
 "class": "spaced-section",
 "settings": [
 {
   "type": "text",
   "id": "header",
   "label": "Title"
  },
 {
   "type": "image_picker",
   "id": "image",
   "label": "image"
 },
 {
   "type": "text",
   "id": "text",
   "default": "Text block",
   "label": "Text"
 },
 {
   "type": "richtext",
   "id": "richtext",
   "default": "<p>Description</p>",
   "label": "Description"
 },
 {
   "type": "checkbox",
   "id": "full_width",
   "label": "settings full width",
   "default": false
 }
 ],
 "blocks": [
 {
   "type": "column",
   "name": "t:sections.multicolumn.blocks.column.name",
   "settings": [
     {
       "type": "text",
       "id": "title",
       "default": "Column",
       "label": "Column"
     },
     {
       "type": "richtext",
       "id": "text",
       "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
       "label": "Richtext"
     }
   ]
 }
],
 "presets": [
   {
     "name": "Footer banner"
   }
 ]
}
{% endschema %}